import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Button, Card, Divider } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import router from 'umi/router';

const { Description } = DescriptionList;
const ButtonGroup = Button.Group;

@connect(({ exampleOrder, loading }) => ({
  exampleOrder,
  loading: loading.effects['exampleOrder/loadDomain'],
}))
class ExampleOrderProfile extends Component {
  componentDidMount() {
    const {
      dispatch,
      match: { params },
    } = this.props;
    dispatch({
      type: 'exampleOrder/loadDomain',
      payload: params.pid,
    });
  }

  goback = () => {
    // history.back();
    router.goBack();
  };

  render() {
    const {
      exampleOrder: { domain },
    } = this.props;
    const action = (
      <Fragment>
        <ButtonGroup>
          <Button icon="rollback" onClick={this.goback}>
            返回
          </Button>
        </ButtonGroup>
      </Fragment>
    );

    return (
      <PageHeaderWrapper title="订单管理演示" action={action}>
        <Card bordered={false}>
          <DescriptionList size="large" title="基础信息" style={{ marginBottom: 32 }}>
            <Description term="订单号">{domain.orderId}</Description>
            <Description term="下单用户">{domain.operAccount}</Description>
            <Description term="下单时间">{domain.submitTime}</Description>
            <Description term="订单总额">{domain.totalPrice}</Description>
            <Description term="收货人名称">{domain.userName}</Description>
            <Description term="收货地址">{domain.userAddress}</Description>
            <Description term="订单状态">{domain.orderStatus}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default ExampleOrderProfile;
